<template>
    <div class="search-condition">
        <w-search-form :isShowMoreSeach="isShowMoreSeach">
            <div class="btns">
                <el-button type="primary" class="search" @click="create"> 生成 </el-button>
                <el-button plain class="resert" @click="download"> 下载 </el-button>
                <el-button plain class="resert" @click="resert"> 重置 </el-button>
                <el-button plain class="collapse" @click="collapse" v-if="formConfig.length > showFormLength && isShowMoreSeach">{{ isCollapse ? "收起条件" : "展开条件" }}</el-button>
            </div>
        </w-search-form>
    </div>
    <div class="report">
        <device-table ref="deviceTableRef" :formData="formData" :tableData="tableData" />
    </div>
</template>

<script setup>
import wSearchForm from "@/components/wSearchForm.vue";
import deviceTable from "./cpn/deviceTable.vue";
import { formConfig } from "./config.js";
import { provide, ref, reactive, watch } from "vue";
import emitter from "@/bus";
import { useChangeColor } from "@/hooks/useChangeColor.js";
import { getequipmentarealocationlist } from "@/service/api/equipmentManagement.js";
import { getbasicsequipmentcodelist } from "@/service/api/healthAssessment.js";
import { getbasicsequipmentnamelist } from "@/service/api/faultDetection.js";
import { getDeviceReport } from "@/service/api/deviceReport.js";

import dayjs from "dayjs";
const { bgColor, anotherColor } = useChangeColor();
const emit = defineEmits(["collapse", "resert", "search"]);
const deviceTableRef = ref(null);
const isCollapse = ref(false);
const props = defineProps({
    isShowMoreSeach: {
        type: Boolean,
        default: true
    }
});
const tableData = ref({});
const formData = reactive({ location: "", equipmentCode: "", day: 1, time: dayjs().format("YYYY-MM-DD") });
const download = () => {
    deviceTableRef.value.download();
};
const create = () => {
    if (!formData.equipmentCode) {
        ElMessage.error("请选择设备");
        return;
    }
    if (!formData.day) {
        ElMessage.error("请选择报表类型");
        return;
    }
    deviceTableRef.value.data.time = dayjs().format("YYYY-MM-DD HH:mm:ss");
    getDeviceReport({
        equipmentCode: formData.equipmentCode,
        period: formData.day,
        startTime: formData.time ? `${formData.time} 00:00:00` : ""
    }).then((res) => {
        if (res.code === 200) {
            let device = [];
            let mainBeam = [];
            tableData.value = res.data;
            tableData.value.equipmentTrendSmoothModels
                .filter((item) => item.logotype === 1)
                .forEach((item) => {
                    item.equipmentTrendDatas.forEach((subItem) => {
                        const isAdd = item.equipmentTrendDatas.some((eitem) => eitem.title === item.evaluateObject);
                        if (!isAdd) {
                            subItem.title = item.evaluateObject;
                            subItem.isTitle = true;
                            subItem.length = item.equipmentTrendDatas.length;
                        } else {
                            subItem.isTitle = false;
                        }
                    });
                    device = [...device, ...item.equipmentTrendDatas];
                });
            tableData.value.equipmentTrendSmoothModels
                .filter((item) => item.logotype === 2)
                .forEach((item) => {
                    item.equipmentTrendDatas.forEach((subItem) => {
                        const isAdd = item.equipmentTrendDatas.some((eitem) => eitem.title === item.evaluateObject);
                        if (!isAdd) {
                            subItem.title = item.evaluateObject;
                            subItem.isTitle = true;
                            subItem.length = item.equipmentTrendDatas.length;
                        } else {
                            subItem.isTitle = false;
                        }
                    });
                    mainBeam = [...mainBeam, ...item.equipmentTrendDatas];
                });
            tableData.value.device = device;
            tableData.value.mainBeam = mainBeam;
        }
    });
};
watch(
    () => formData.location,
    (news) => {
        formData.equipmentCode = "";
        formConfig.value[1].options = [];
        formConfig.value[2].options = [];
        getbasicsequipmentcodelist({ area: news }).then((res) => {
            if (res.code === 200) {
                formConfig.value[1].options = res.data.map((item) => ({ label: item.name, value: item.value }));
            }
        });
        getbasicsequipmentnamelist({ area: news }).then((res) => {
            if (res.code === 200) {
                formConfig.value[2].options = res.data.map((item) => ({ label: item.name, value: item.value }));
            }
        });
    }
);
getequipmentarealocationlist().then((res) => {
    if (res.code === 200) {
        formConfig.value[0].options = res.data.map((item) => ({ label: item.name, value: parseInt(item.value) }));
    }
});
const collapse = () => {
    isCollapse.value = !isCollapse.value;
    emitter.emit("collapse", isCollapse.value);
};
const resert = () => {
    Object.keys(formData).forEach((key) => (formData[key] = ""));
};
const showFormLength = ref(getFormLength());
function getFormLength() {
    if (document.body.clientWidth >= 1920) {
        return 3;
    } else if (document.body.clientWidth >= 1200) {
        return 2;
    } else {
        return 1;
    }
}
provide("formConfig", formConfig);
provide("formData", formData);
</script>

<style lang="less" scoped>
.search-condition {
    box-sizing: border-box;
    padding: 20px 24px 0;
    margin-bottom: 16px;
    background-color: v-bind(bgColor);
    .btns {
        display: flex;
        .search {
            background-color: v-bind(anotherColor);
        }
        .resert {
            border: 1px solid v-bind(anotherColor);
            color: v-bind(anotherColor);
            background-color: v-bind(bgColor);
        }
        .collapse {
            padding: 6px 25px;
            background-color: #ecf1f3;
            border: none;
            color: #8c8c8c;
        }
    }
}
.report {
    margin-top: 16px;
    background-color: #fff;
}
</style>
